<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane :disabled="xuanzhong">
        <span slot="label"><i class="el-icon-date"></i>退租协议表单</span>
          收房合同号<el-input
            style="width: 200px"
            v-model="form1.id"
            :disabled="true">
          </el-input>
        <el-button type="text" @click="list">收房合同查询</el-button><br><br><br><br>
        收房合同编号<el-input
        style="width: 200px"
        v-model="form1.contractNo"
        :disabled="true">
      </el-input>
        房产信息<el-input
        style="width: 200px"
        v-model="form1.businessId"
        :disabled="true">
      </el-input><br><br><br><br>
        产权地址<el-input
        style="width: 200px"
        v-model="form1.premiseName"
        :disabled="true">
      </el-input>
        产房证书编号<el-input
        style="width: 200px"
        v-model="form1.ownerName"
        :disabled="true">
      </el-input><br><br><br><br>
        业主姓名<el-input
        style="width: 200px"
        v-model="form1.ownerMobile"
        :disabled="true">
      </el-input>
        业主电话号码<el-input
        style="width: 200px"
        v-model="form1.contactAddress"
        :disabled="true">
      </el-input><br><br><br><br>
        签约人姓名<el-input
        style="width: 200px"
        v-model="form1.userName"
        :disabled="true">
      </el-input>
        签约人电话号码<el-input
        style="width: 200px"
        v-model="form1.userMobile"
        :disabled="true">
      </el-input><br><br><br><br>
        <div class="block">
          <span class="demonstration">物业交割时间</span>
          <el-date-picker
            v-model="form1.creatrTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          解约类型<el-select v-model="form1.classzz" placeholder="解约类型">
            <el-option label="合同到期" value="1"></el-option>
            <el-option label="我方提前解约" value="2"></el-option>
            <el-option label="客户提前解约" value="3"></el-option>
          </el-select>
        </div><br><br><br><br>
        <el-card class="box-card" style="width: 1000px">
          <div slot="header" class="clearfix">
            <span>应退</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addLine">+</el-button>
          </div>
          <div v-for="o in lineList" :key="o.id" class="text item" >
            <el-form :inline="true" :model="o" class="demo-form-inline">
              {{o.id}}
              <el-select v-model="o.classzz" placeholder="违约金">
                <el-option label="违约金" value="1"></el-option>
                <el-option label="租金" value="2"></el-option>
                <el-option label="冷水" value="3"></el-option>
                <el-option label="中水" value="4"></el-option>
                <el-option label="热水" value="5"></el-option>
                <el-option label="电" value="6"></el-option>
                <el-option label="燃气/煤气" value="7"></el-option>
                <el-option label="保洁费" value="8"></el-option>
                <el-option label="维修费" value="9"></el-option>
                <el-option label="其他费用" value="10"></el-option>
              </el-select>
              <el-input v-model="o.meney" placeholder="0.00" style="width: 200px" @change="jianqian(o.meney)"></el-input>
              <el-input v-model="o.remark" placeholder="备注" style="width: 200px"></el-input>
              <el-button type="warning" @click="deleteline(o)">删除</el-button>
            </el-form>
          </div>
        </el-card><br><br><br><br>
        <el-card class="box-card" style="width: 1000px">
          <div slot="header" class="clearfix">
            <span>应收</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addLine1">+</el-button>
          </div>
          <div v-for="o in lineList1" :key="o.id" class="text item" >
            <el-form :inline="true" :model="o" class="demo-form-inline">
              {{o.id}}
              <el-select v-model="o.classzz" placeholder="违约金">
                <el-option label="违约金" value="1"></el-option>
                <el-option label="租金" value="2"></el-option>
                <el-option label="冷水" value="3"></el-option>
                <el-option label="中水" value="4"></el-option>
                <el-option label="热水" value="5"></el-option>
                <el-option label="电" value="6"></el-option>
                <el-option label="燃气/煤气" value="7"></el-option>
                <el-option label="保洁费" value="8"></el-option>
                <el-option label="维修费" value="9"></el-option>
                <el-option label="其他费用" value="10"></el-option>
              </el-select>
              <el-input v-model="o.meney" placeholder="0.00" style="width: 200px" @change="jiaqian(o.meney)"></el-input>
              <el-input v-model="o.remark" placeholder="备注" style="width: 200px"></el-input>
              <el-button type="warning" @click="deleteline1(o)">删除</el-button>
            </el-form>
          </div>
        </el-card><br><br><br><br>
        <h1>总价{{this.sum}}</h1><br>
        <el-button type="warning" >取消</el-button>
        <el-button type="warning" @click="nextClazz">下一步</el-button>
      </el-tab-pane>
      <el-tab-pane label="解约协议" :disabled="xuanzhong1" >
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible4">
          <img width="100%" :src="dialogImageUrl4" alt="">
        </el-dialog>

        <br><br><br>
        <h1>
          物业交割单
        </h1>
        -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible4">
          <img width="100%" :src="dialogImageUrl4" alt="">
        </el-dialog>

        <br><br><br>
        <h1>其他</h1>
        -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible4">
          <img width="100%" :src="dialogImageUrl4" alt="">
        </el-dialog>
        <el-button type="warning" @click="getClazz">上一步</el-button>
        <el-button type="success" @click="add" style="width: 200px;text-align:center" round>添加</el-button>
      </el-tab-pane>

    </el-tabs>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="userName" label="业主姓名" width="150"></el-table-column>
        <el-table-column property="hebing" label="房产信息" width="200"></el-table-column>
        <el-table-column property="startTime" label="签约日期"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope)"
              type="text"
              size="small">
              选中
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import { contractList,contractAdd } from "@/api/puthome/sfContract"
    export default{
      data() {
        return{
          dialogVisible4:[],
          dialogImageUrl4:[],
          i:0,
          i1:0,
          fileList: [
            {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
            {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
            ],
          lineList:[
            {
              id:0,
              classzz:'',
              meney:0.00,
              remark:'',
            }
          ],
          lineList1:[
            {
              id:0,
              classzz:'',
              meney:0.00,
              remark:'',
            }
          ],
          gridData: [],
          dialogTableVisible: false,
          input: '',
          xuanzhong:false,
          xuanzhong1:true,
          form2:{
            id:0,
            classzz:1,
            meney:0.00,
            remark:'',
          },
          sum:0,
          form1:{
            id:'',
            classzz:'',
            contractNo:'',
            businessId:'',
            premiseName:'',
            ownerName:'',
            ownerMobile:'',
            contactAddress:'',
            userName:'',
            userMobile:'',
            creatrTime:''
          }
        }
      },
      methods:{
        add(){
          contractAdd(this.form1).then(ref=>{
            if (ref){
              alert("添加成功")
            }else {
              alert("添加失败")
            }
          })
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        getClazz(){
          this.xuanzhong=false,
          this.xuanzhong1=true
        },
        nextClazz(){
          this.xuanzhong=true,
          this.xuanzhong1=false
        },
        jianqian(meney){
          this.sum = parseInt(this.sum) - parseInt(meney)
        },
        jiaqian(meney){
          this.sum =  parseInt(this.sum) + parseInt(meney)
        },
        deleteline1(row){
          var j=0;
          this.lineList1.forEach(line=>{
            console.log(line)
            console.log("-----------")
            if (line.id==row.id){
              this.lineList1.splice(j,1)
            }
            j++;
            console.log(line)
          })
          this.jianqian(row.meney)
        },
        addLine1(){
          this.i1++
          this.lineList1.push({
            id:this.i1,
            classzz:1,
            meney:0.00,
            remark:'',
          })
          console.log(this.i1)
        },
        deleteline(row){
          var j=0;
          this.lineList.forEach(line=>{
            if (line.id==row.id){
              this.lineList.splice(j,1)
            }
            j++;
          })
          this.jiaqian(row.meney)
        },
        addLine(){
          this.i++
          this.lineList.push({
            id:this.i,
            classzz:1,
            meney:0.00,
            remark:'',
          })
        },
        deleteRow(row){
          console.log(row)
          this.form1=row.row
          console.log(this.form1)
          this.dialogTableVisible=false
        },
        list(){
          this.dialogTableVisible=true
          contractList().then(ref=>{
            console.log(ref)
            ref.forEach(ref=>{
              console.log(ref.premiseName+"("+ref.houseName+")")
              ref.hebing = ref.premiseName+"("+ref.houseName+")"
            })
            this.gridData = ref
          })
        }
      }
    }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
